<template>
	<view class="gift-float">
		<!-- :style="{top:top+'rpx',left:left+'rpx'}" -->
		<view class="gift-fly-box" :style="styleObj">
			<template v-for="(item,index) in effects">
				<view class="gift-fly-item" :key="index" v-if="item.visible" :style="item.style">
				</view>
			</template>

		</view>


	</view>
</template>

<script>
	export default {
		props: {
			timeout: {
				type: [String, Number],
				default: '2000'
			},
			xType: {
				type: String,
				default: 'right', //right、left
			},
			yType: {
				type: String,
				default: 'bottom', //top、bottom
			},

			top: {
				type: Number,
				default: 920
			},
			bottom: {
				type: Number,
				default: 100
			},
			right: {
				type: Number,
				default: 30
			},
			left: {
				type: Number,
				default: 60
			}
		},
		data() {
			return {
				imageList: [
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/97796f2184b74803985097715940ceae.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bac83c68e2314f50af8c1c910edd1a35.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ba1858b1079842fb81f85da0dcfd9a99.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0bb7a1f7b70043baba93f89593b8592c.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2b793e81635d43a789a6320e153d372e.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/541d2646ce24456fa7f12a1b747e5d30.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/98dbeeb9455b48e8bf5fb154485e36ea.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b177e499c68340f4afcf5200f1816a33.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c66e7989b78e4e578a18be51170ad215.png"
				],
				idCounter: 0,
				effects: [],
				removalQueue: [], // 移除队列
			}
		},
		computed: {
			aniDuration() {
				return this.timeout / 1000 + 's'
			},
			styleObj() {
				let str = ""
				if (this.xType == 'right' && this.yType == 'top') {

					str = `right:${this.right}rpx;top:${this.top}rpx;`

				} else if (this.xType == 'right' && this.yType == 'bottom') {

					str = `right:${this.right}rpx;bottom:${this.bottom}rpx;`

				} else if (this.xType == 'left' && this.yType == 'bottom') {

					str = `left:${this.left}rpx;bottom:${this.bottom}rpx;`

				} else if (this.xType == 'left' && this.yType == 'top') {

					str = `left:${this.left}rpx;top:${this.top}rpx;`

				}
				return str
			}
		},
		mounted() {},
		methods: {
			handleTouchStart() {
				this.handleStartFly()
			},
			getRandomImage() {
				let imageList = this.imageList
				if (!imageList || imageList.length === 0) {
					return null; // 如果数组为空，返回 null
				}
				const randomIndex = Math.floor(Math.random() * imageList.length);
				return imageList[randomIndex];
			},
			handleStartFly(icon) {
				// let styleStart =
				// 	`display: block; position: fixed; z-index: 999; pointer-events: none;  background-image: url(${icon}); background-size:contain ;background-repeat: no-repeat; left: ${this.left}rpx; top: ${this.top}rpx;animation-duration:${this.aniDuration}!important ;`;
				// let icon = this.getRandomImage()
				if (!icon) {
					return
				}
				let styleStart =
					`display: block; background-image: url(${icon}); background-size:contain ;background-repeat: no-repeat; animation-duration:${this.aniDuration}!important ;`;
				let obj = {
					style: styleStart,
					id: this.idCounter++,
					visible: true
				}
				this.effects.push(obj)
				setTimeout(() => {
					this.handleRemoveEffect(obj.id)
				}, this.timeout);
			},

			handleRemoveEffect(effectId) {
				// 找到对应的特效并设置为不可见
				const effect = this.effects.find(e => e.id === effectId);
				if (effect) {
					this.removalQueue.push(effectId); // 将要移除的特效 ID 加入队列
					this.processRemovalQueue(); // 处理移除队列
				}
			},
			processRemovalQueue() {
				// 如果没有待移除特效，结束处理
				if (this.removalQueue.length === 0) return;
				const effectId = this.removalQueue[0]; // 获取队列中的第一个特效 ID
				const index = this.effects.findIndex(e => e.id === effectId);
				if (index !== -1) {
					this.effects[index].visible = false
				}
				this.removalQueue.shift(); // 移除队列中的第一个元素
				this.processRemovalQueue(); // 递归处理下一个
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gift-float {
		pointer-events: none;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		z-index: 9;
		width: 100vw;
		height: 100vh;

		.gift-fly-box {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			opacity: 0.8;



			.gift-fly-item {
				position: absolute;
				left: 0rpx;
				bottom: 0rpx;
				width: 60rpx;
				height: 60rpx;
				animation: flyAnimation 1s forwards;
			}

		}


		@keyframes flyAnimation {
			0% {
				transform: scale(0.1);
				opacity: 1;
				bottom: 0rpx;
			}

			30% {
				transform: scale(1);
				opacity: 1;
				bottom: 0rpx;
			}

			70% {
				transform: scale(1);
				opacity: 1;
				bottom: 200rpx;
			}

			100% {
				transform: scale(1);
				opacity: 0;
				bottom: 250rpx;
			}
		}

	}
</style>